<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>早期的前后端分离</title>
</head>
<body>
    <h3>用户信息</h3>
        <table border="3">
            <tr>
                <th>用户编号</th>
                <th>用户姓名</th>
                <th>用户性别</th>
                <th>用户年龄</th>
            </tr>
            <tbody id="userBox">
                <!-- 这里是动态的内容 -->
            </tbody>
        </table>
        <!-- script表示脚本 -->
        <script>
            let userArr = [
                {
                   userId:1,
                   userName:'张三',
                   userSex:'男',
                   userAge:20
                },
                {
                   userId:2,
                   userName:'李四',
                   userSex:'男',
                   userAge:21
                },
                {
                   userId:3,
                   userName:'王五',
                   userSex:'男',
                   userAge:19
                }
            ]

            let userBox = document.getElementById("userBox");
            let str = "";
            // 添加数据
            for(let i=0;i<userArr.length;i++){
                str += '<tr>'+
                            '<td>'+userArr[i].userId+'</td>'+
                            '<td>'+userArr[i].userName+'</td>'+
                            '<td>'+userArr[i].userSex+'</td>'+
                            '<td>'+userArr[i].userAge+'</td>'+
                        '</tr>';

            }
            userBox.innerHTML = str;
        </script>
</body>
</html>
